<template>
	<view class="back-view" @touchmove.stop.prevent="moveHandle">
		<view class="view-background"></view>
		<view class="white-view-back">
			<view class="top-back">
				<view class="top-name">{{pageTitle}}</view>
				<view class="close-back" @click="closeBtnAction">
					<image class="close-img" src="../../../static/close.png"></image>
				</view>
			</view>

			<view class="top-line"></view>
			<view style="width: 100%;" scroll-y="true" class="scrolview-back">
				<uni-forms ref="baseForm" :modelValue="baseFormData">
					<uni-forms-item label="名称：" labelWidth="100" labelAlign="right" required>
						<view class="item-back ">
							<uni-easyinput v-model="baseFormData.name" placeholder="请填写" />
						</view>
					</uni-forms-item>
					<uni-forms-item label="有效期：" labelWidth="100" labelAlign="right" required>
						<view class="item-back ">
							<uni-datetime-picker v-model="range" type="datetimerange" rangeSeparator="至" />
						</view>
					</uni-forms-item>
					<uni-forms-item label="排序：" labelWidth="100" labelAlign="right" required>
						<view class="item-back ">
							<uni-easyinput v-model="baseFormData.sort" placeholder="序号越小，排名越靠前" />
						</view>
					</uni-forms-item>
					<uni-forms-item label="图片：" labelWidth="100" labelAlign="right" required>
						<uni-file-picker v-model="imgArr" :image-styles="imageStyles"  limit="1" file-extname='jpeg,png,jpg' fileMediatype="image" @select="selectImg"
							@delete="deleteImg"></uni-file-picker>
						<view class="item-des">只支持JPEG、JPG、PNG格式，建议尺寸1029*411 px</view>
					</uni-forms-item>
					<uni-forms-item label="跳转链接：" labelWidth="100" labelAlign="right" required>
						<view class="item-back law-item-back">
							<uni-data-checkbox v-model="baseFormData.targetType.code" :localdata="urls" />
							<view v-if="baseFormData.targetType.code == 2">
								<input @input="onKeyInput" class="selectLaw" @focus="startEditAction"
									v-model="productInput" placeholder="选择商品"></input>
								<view v-if="showMask" class="selectLaw-list">
									<scroll-view class="pop-content-back" scroll-y="true">
										<view class="pop-content-list" v-for="(item,index) in productArr"
											@click="clickPopItemAction(item)">
											<view class="pop-content-name">{{item.name}}</view>
										</view>
									</scroll-view>
								</view>
							</view>
							<view v-if="baseFormData.targetType.code == 3">
								<input @input="onKeysmallInput" class="selectLaw" @focus="startsmallEditAction"
									v-model="smallInput" placeholder="选择微页面"></input>
								<view v-if="showsmallMask" class="selectLaw-list">
									<scroll-view class="pop-content-back" scroll-y="true">
										<view class="pop-content-list" v-for="(item,index) in smallArr"
											@click="clickPopsmallItemAction(item)">
											<view class="pop-content-name">{{item.name}}</view>
										</view>
									</scroll-view>
								</view>
							</view>

						</view>
						<view class="mask-view" v-if="showMask || showsmallMask" @tap="tapMask"></view>

					</uni-forms-item>

				</uni-forms>
			</view>
			<view class="bottom-back">
				<view class="bottom-btn bottom-btn-cancel" @click="closeBtnAction">取消</view>
				<view class="bottom-btn" @click="submitAction">保存</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uploadImage from '@/pages/utils/ossutil/uploadFile.js'
	import requsetFileId from '@/pages/utils/upload.js'

	export default {
		props: {
			itemID: {
				type: String,
				default: ''
			},
			editType: {
				type: String,
				default: 'add',
			},
		},
		data() {
			return {

				pageTitle: "新增banner",
				baseFormData: {
					'id': '',
					'name': '',
					'beginTime': '',
					'endTime': '',
					'picUrls': '',
					'sort': '',
					'targetType': {
						code: '',
						desc: ""
					},
					'targetUrl': '',
					'type': {
						code: "0",
						desc: "banner"
					}
				},

				urls: [{
					text: '无',
					value: '0'
				}, {
					text: '跳转商品列表',
					value: '1'
				}, {
					text: '跳转商品详情',
					value: '2'
				}, {
					text: '跳转微页面',
					value: '3'
				}],
				range: ['', ''],
				video: "",
				info: {
					'video': ''
				},
				imgArr: [],
				typeArr: [], //广告类型

				showMask: false,
				productArr: [], //商品列表
				productInput: '',
				productSelect: {},

				smallArr: [], //微页面列表
				smallInput: '',
				smallSelect: {},
				showsmallMask: false,
				imageStyles: {
					width: 250,
					height: 100,
					border: {	
						width: 1,
						style: 'dashed',
						radius: '2px'
					}
				},
			}
		},

		mounted() {
			if (this.editType == 'edit') {
				this.pageTitle = '编辑banner';
				this.baseFormData.id = this.itemID
				this.requestInfoData();
			}
			this.getOss();
			this.requestDicData();
			this.requestProductData(false);
			this.requestSmallData(false);
		},
		methods: {
			submitAction() {
				this.baseFormData.beginTime = this.range[0];
				this.baseFormData.endTime = this.range[1];
				console.log(this.baseFormData)

				this.requestData()
			},
			//网络请求示例
			async requestData() {
				let _this = this
				if (!this.baseFormData.name) {
					uni.showToast({
						title: '请填写姓名',
						icon: 'none'
					})
					return;
				}
				if (!this.baseFormData.beginTime) {
					uni.showToast({
						title: '请填写开始日期',
						icon: 'none'
					})
					return;
				}
				if (!this.baseFormData.endTime) {
					uni.showToast({
						title: '请填写结束日期',
						icon: 'none'
					})
					return;
				}
				if (!this.baseFormData.sort) {
					uni.showToast({
						title: '请填写排序',
						icon: 'none'
					})
					return;
				}
				if (!this.baseFormData.picUrls) {
					uni.showToast({
						title: '请选择图片',
						icon: 'none'
					})
					return;
				}
				if (this.baseFormData.targetType.code == 2 && !this.productSelect.id) {
					uni.showToast({
						title: '请选择商品',
						icon: 'none'
					})
					return;
				}
				if (this.baseFormData.targetType.code == 3 && !this.smallSelect.id) {
					uni.showToast({
						title: '请选择微页面',
						icon: 'none'
					})
					return;
				}
				var targetUrl = this.baseFormData.targetType.code.toString();
				if (this.baseFormData.targetType.code == 2) {
					targetUrl = this.productSelect.id
				}
				if (this.baseFormData.targetType.code == 3) {
					targetUrl = this.smallSelect.id
				}

				var parms = {
					'id': this.baseFormData.id,
					'name': this.baseFormData.name,
					'beginTime': this.baseFormData.beginTime,
					'endTime': this.baseFormData.endTime,
					'picUrls': this.baseFormData.picUrls,
					'sort': this.baseFormData.sort.toString(),
					'type': this.baseFormData.type,
					'targetUrl': targetUrl,
					'targetType': this.baseFormData.targetType.code,
					
				}
				const res = await this.$myRequest({
					url: "/admin/advert",
					method: _this.editType == 'edit' ? 'PUT' : 'POST',
					data: parms
				})
				console.log('返回结果', res)

				if (res.data.code == 200) {
					uni.showToast({
						title: _this.editType == 'edit' ? '编辑成功' : '添加成功'
					})
					_this.$emit("successBack");
					_this.closeBtnAction()
				}else{
					uni.showToast({
						icon:'none',
						title: res.data.msg
					})
				}
			},
			//信息网络请求
			async requestInfoData() {
				let _this = this
				const res = await this.$myRequest({
					url: '/admin/advert/' + this.itemID,
					method: 'GET',
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					_this.baseFormData = res.data.data;
					if (res.data.data.beginTime && res.data.data.endTime) {
						_this.$set(_this.range, 0, res.data.data.beginTime)
						_this.$set(_this.range, 1, res.data.data.endTime)

					}
					if (res.data.data.picUrls) {
						var item = {
							'url': '',
							'fileID': ''
						}
						item.url = _this.$imageUrls({
							picUrls: res.data.data.picUrls,
							height: '400'
						})
						item.fileID = _this.$imageUrls({
							picUrls: res.data.data.picUrls,
							height: '400'
						})

						_this.imgArr.push(item);
						console.log(_this.imgArr)
					}
					if (!res.data.data.targetType) {
						this.$set(_this.baseFormData, 'targetType', {
							code: '0',
							desc: "无"
						})
					}
					if (_this.baseFormData.targetType.code == 2) { //商品详情
						_this.requestProductData(true);
					} else if (_this.baseFormData.targetType.code == 3) { //微页面
						_this.requestSmallData(true);
					}
				}
			},

			//跳转链接
			async requestDicData() {
				let _this = this
				const res = await this.$myRequest({
					url: "/comm/dict/list/$Advert$target",
					method: 'GET',
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					_this.typeArr = res.data.data;
				}
			},

			//商品列表
			async requestProductData(isFirst) {
				let _this = this
				var url = "/admin/goods/list";
				let parmas = {
					size: '1000'
				};
				if (_this.productInput) {
					_this.$set(parmas, 'name', 'lk:' + _this.productInput)
				}
				const res = await this.$myRequest({
					url: url,
					method: 'POST', //默认是GET
					data: parmas,
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					_this.productArr = res.data.data.list
					if (isFirst) {
						for (var i = 0; i < _this.productArr.length; i++) {
							var item = _this.productArr[i]
							if (_this.baseFormData.targetUrl == item.id) {
								this.productInput = item.name;
								this.productSelect = item;
							}
						}
					}
				}
			},

			//微页面列表
			async requestSmallData(isFirst) {
				let _this = this
				var url = "/admin/news/list";
				let parmas = {
					size: '1000'
				};
				if (_this.productInput) {
					_this.$set(parmas, 'name', 'lk:' + _this.smallInput)
				}
				const res = await this.$myRequest({
					url: url,
					method: 'POST', //默认是GET
					data: parmas,
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					_this.smallArr = res.data.data.list
					if (isFirst) {
						for (var i = 0; i < _this.smallArr.length; i++) {
							var item = _this.smallArr[i]
							if (_this.baseFormData.targetUrl == item.id) {
								this.smallInput = item.name;
								this.smallSelect = item;
							}
						}
					}
				}
			},

			/**
			 * 获取上传文件临时秘钥
			 */
			async getOss() {
				let _this = this
				const res = await _this.$myRequest({
					url: "/comm/oss/sts",
					header: {
						"Authorization": "Basic ZG90Z286ZG90Z28=",
						"token": uni.getStorageSync("accessToken")
					},
				})
				console.log('获取oss上传临时密钥', res)
				if (res.data.code == 200) {
					getApp().globalData.upLoadAccess = res.data.data
					var time = Date.now()
					getApp().globalData.upLoadAccess.time = time
				}
			},

			// 获取上传状态
			async selectImg(res1) {
				var _this = this;
				console.log('选择文件：', res1)
				let uploadPath = res1.tempFiles[0].path;
				let fileSuffixArray = uploadPath.split('.')

				let fileSuffix = res1.tempFiles[0].extname
				let name = '1.' + res1.tempFiles[0].extname
				let ossPath = 'banner'
				const uploads = await requsetFileId.getPath(ossPath, uploadPath, name)
				console.log('广告uploads', uploads)
				this.baseFormData.picUrls = uploads
			},
			//删除图片
			deleteImg() {
				this.baseFormData.picUrls = '';
				// this.baseFormData.targetUrl = '';
			},

			startEditAction(e) {
				console.log("开始编写")
				console.log(e)
				this.showMask = true
			},
			//商品：输入
			onKeyInput(event) {
				console.log(event.target.value)
				this.requestProductData(false)
			},
			tapMask() {
				this.showMask = false
				this.showsmallMask = false
			},

			//选择商品
			clickPopItemAction(item) {
				this.showMask = false;
				this.productInput = item.name;
				this.productSelect = item;

			},

			//微页面
			startsmallEditAction(e) {
				console.log("开始编写")
				console.log(e)
				this.showsmallMask = true
			},
			//微页面：输入
			onKeysmallInput(event) {
				console.log(event.target.value)
				this.smallSelect = {};
				this.requestSmallData(false)
			},


			//微页面
			clickPopsmallItemAction(item) {
				console.log(item)
				this.showsmallMask = false;
				this.smallInput = item.name;
				this.smallSelect = item;
			},
			closeBtnAction() {
				this.$emit('addBnnerClose')
			},
			moveHandle() {
				return true
			},
		},
	}
</script>

<style>
	.back-view {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 9;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.view-background {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 8;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.white-view-back {
		width: 600px;
		height: 600px;
		padding: 24px;
		max-height: 600px;
		background-color: white;
		margin-top: -50px;
		border-radius: 4px;
		z-index: 10;
		position: absolute;
	}

	.top-back {
		display: flex;
		justify-content: space-between;
	}

	.top-name {
		font-size: 18px;
		font-weight: normal;
		color: #333333;

	}

	.close-back {
		cursor: pointer;
		width: 20px;
		height: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.close-img {
		width: 12px;
		height: 12px;
	}

	.top-line {
		height: 1px;
		background: #EEEEEE;
		width: 100%;
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.bottom-back {
		cursor: pointer;
		bottom: 0px;
		width: 100%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		position: absolute;
		height: 60px;
		right: 16px;
	}

	.bottom-btn {
		width: 104px;
		height: 32px;
		background: #2DA9C5;
		border-radius: 2px;
		color: #FFFFFF;
		font-size: 14px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bottom-btn-cancel {
		cursor: pointer;
		margin-right: 10px;
		background: #FFFFFF;
		border: 1px solid #EEEEEE;
		color: #333333;
	}

	.item-back {
		width: 450px;
	}

	.customer-item {
		display: flex;
		margin-top: 8px;
		align-items: center;

	}

	.customer-back {
		min-width: 168px;
		height: 44px;
		background: #E8F7FB;
		border-radius: 4px;
		display: flex;
		align-items: center;
		margin-right: 10px;
	}

	.customer-img {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		margin-left: 8px;
	}

	.customer-name {
		font-size: 12px;
		font-weight: 400;
		color: #666666;
		margin-left: 2px;
	}

	.customer-phone {
		font-size: 12px;
		font-weight: 400;
		color: #666666;
		margin-left: 4px;
	}

	.customer-close {
		width: 16px;
		height: 16px;
		margin-right: 2px;
		margin-left: auto;
	}

	.customer-item-back {
		display: flex;
		flex-wrap: wrap;

	}

	.selectLaw {
		font-size: 14px;
		border: 1px solid #DCDFE6;
		border-radius: 4px;
		padding: 6px 10px;
		position: relative;
		flex-direction: row;
		align-items: center;
		z-index: 20;
		background-color: white;
	}

	.law-item-back {
		background-color: white;
	}

	.selectLaw-list {
		margin-top: 2px;
		position: absolute;
		width: 445px;
		height: 130px;
		z-index: 22221;
		background-color: white;
		box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.2000);
		border-radius: 2px;
	}

	.mask-view {
		position: absolute;
		width: 100vw;
		height: 100vh;
		z-index: 19;
		background-color: rgba(0, 0, 0, 0.0);
		top: -600px;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.pop-content-back {
		height: 120px;
		margin-left: 20px;
		width: 420px;
		margin-top: 10px;
	}

	.pop-content-list {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		margin-top: 10px;
	}

	.pop-content-img {
		width: 20px;
		min-width: 20px;
		height: 20px;
		border-radius: 50%;
	}

	.pop-content-name {
		font-size: 12px;
		font-weight: 400;
		color: #666666;
		margin-left: 6px;
	}

	.pop-content-phone {
		font-size: 12px;
		font-weight: 400;
		color: #666666;
		margin-left: 10px;
	}

	.scrolview-back {}

	.item-des {
		color: #aaa;
		margin-top: 5px;
		font-size: 12px;
	}
</style>
